<template>
	<!-- 我的 -->
	<view class="mine">
		<!-- 头部 -->
		<view class="header">
			<view class="headerTop">
				<button class="storeGroup" plain style="margin-left: 0;" @click="storeGroup">
					门店群
				</button>
			</view>
			
			<view class="personalData" @click="pageToPersonalData(userInfo)" plain>
				<!-- 微信头像 -->
				<!-- 存在一个问题:getUserProfile是需要绑定点击事件用户授权方可得到信息,直接渲染不现实,
						这边前端的解决方式给一张默认头像,给一个获取用户微信头像的按钮,用户选择使用微信头像后替换 -->
					<image class="portrait" :src="userInfo.avatarUrl" mode="widthFix" @click.stop="getUserProfile"></image>

					<text class="Nickname">{{userInfo.nickName}}</text>
					<text class="GroupNumber">场次:{{userInfo.playedCount}}次</text>
				<text class="iconfont icon-jiantouyou"></text>
			</view>
		</view>
		
		<!-- 主体表单_按钮 -->
		<view class="content">
			
				<button class="myGrouping" @click="pageToMyGrouping(userInfo.openID)" plain>
					<text class="iconfont icon-wodefill"></text>
					<text>我的组局</text>
					<text class="iconfont icon-jiantouyou"></text>
				</button>

				<button class="myPlay" @click="pageToMyPlay(userInfo.openID)" plain>
					<text class="iconfont icon-yangbenxinxidanyangbenbiao"></text>
					<text>我想玩的剧本</text>
					<text class="iconfont icon-jiantouyou"></text>
				</button>
				
				<button class="myPlayed" @click="pageToMyPlayed(userInfo.openID)" plain>
					<text class="iconfont icon-tushu"></text>
					<text>我玩过的剧本</text>
					<text class="iconfont icon-jiantouyou"></text>
				</button>

				<button class="contactStore" @click="contactStore" plain>
					<text class="iconfont icon-kefu"></text>
					<text>联系本店</text>
					<text class="iconfont icon-jiantouyou"></text>
				</button>

		</view>
		
		<!-- 脚部 -->
		<view class="footer">
			<!-- 点击loge跳转首页 -->
			<image :src="'http://124.220.177.66:8082'+store.logo" mode="widthFix" style="width: 150rpx;border-radius: 50%;" @click="pageToIndex"></image>
		</view>
		
		<!-- 交互-uni-ui组件 -->
		<view class="interaction_uniUi">
			
			<!-- 门店群底部弹窗 -->
			<view class="storeGroup_popup">
				<uni-popup ref="storeGroup_popup" background-color="#ccc">
					<view class="popup-content">
						<view class="storeGroup_popup_text">
							<view>
								<text>门店群</text>
								<text style="font-size: 25rpx;display: block;">预约/储存/拼车等请联系本店微信</text>
							</view>
							<uni-icons type="clear" size="40" @click="storeGroup_close"></uni-icons>
						</view>
						<block>
							<!-- 需求:长按识别扫描二维码 -->
							<image :src="'http://124.220.177.66:8082'+store.QRcode" :show-menu-by-longpress="true" @click="previewImage" style="width: 750rpx;" mode="widthFix"></image>
						</block>
					</view>
				</uni-popup>
			</view>
			
			<!-- 联系本店中部弹框 -->
			<view class="contactStore_popup">
				<!-- 普通弹窗 -->
				<uni-popup ref="contactStore_popup" background-color="#fff">
					<view class="popup-content" >
						<view class="phone">
							电话:
							<!-- 需求:点击电话号码跳转电话簿 -->
							<text @click="makePhoneCall" style="color:#623685;">
								{{store.storePhone}}
							</text>
						</view>
						<view class="wechat">
							微信:
								<text>
									 {{store.wechat}}
								</text>
								<!-- 需求:点击复制,复制微信号到剪切板 -->
								<text @click="copyInfo" style="color:#623685;">(复制)</text>
						</view>
						<view class="cancel_btn">
							<button size="mini" type="primary" @click="contactStore_close">取消</button>
						</view>
					</view>
				</uni-popup>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 用户信息
				userInfo:[],
				phone:'',
				
				// 商家信息
				store:[],
			};
		},
		methods: {
			
			//点击个人信息跳转至个人资料页
			pageToPersonalData(item){			
				//跳转,传微信登录个人信息
				uni.navigateTo({
				    url:"/pages/mine/PersonalData/PersonalData?item="+JSON.stringify(item)
				})
			},
			
			//点击我的组局跳转至我的组局页
			pageToMyGrouping(item){
				//跳转,传微信登录个人信息
				 uni.navigateTo({
				    url:"/pages/mine/MyGroup/MyGroup?item="+item
				})
			},
			
			//点击我想玩的剧本跳转至我想玩的剧本页面
			pageToMyPlay(item){
				//跳转,传微信登录个人信息
				 uni.navigateTo({
				    url:"/pages/mine/Collection/Collection?item="+item
				})
			},
			
			//点击我玩过的剧本跳转至我玩过的剧本页面
			pageToMyPlayed(item){
				//跳转,传微信登录个人信息
				 uni.navigateTo({
				    url:"/pages/mine/Played/Played?item="+item
				})
			},
			
			//点击脚部loge页面跳转至首页
			pageToIndex(){
				//navigateTo/redirectTo都不能跳转tarBar内的页面
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			
			// 点击门店群按钮底部弹窗
			storeGroup(){
				this.$refs.storeGroup_popup.open('bottom')
			},
			
			storeGroup_close(){
				this.$refs.storeGroup_popup.close('bottom')
			},
			//点击联系本店中部弹框
			contactStore(){
				this.$refs.contactStore_popup.open('center')
			},
			
			contactStore_close(){
				this.$refs.contactStore_popup.close('center')
			},
			
			// 从storage中拿到登录用户手机号
			getItemFromSessionStorage(){
				let phoneList= uni.getStorageSync('openID')
				this.phone = phoneList
				console.log('电话号码',this.phone);
			},
			
			// 通过后端获取用户信息
			getUserInfo(){
				// 接口请求
				uni.request({
					url:"http://124.220.177.66:8082/juben/userData",
					method:"POST",
					data:{
						// 确认接口后传this.phone
						"openID": "wx999" 
					},
					success:(res)=> {
						this.userInfo = res.data.data[0];
						console.log('用户信息',this.userInfo);
						
						
					}
				})
			},
			
			//	获取店铺信息
			getStore(){
				uni.request({
					url:"http://124.220.177.66:8082/juben/getStore",
					success:(res)=> {
						this.store = res.data.data[0];
						console.log('店铺信息',this.store.logo);
						//初始化默认头像路径
						this.userInfo.avatarUrl = 'http://124.220.177.66:8082'+this.store.logo
						console.log('我的头像地址',this.userInfo.avatarUrl);
					}
				})
			},
			
			//通过微信接口获取用户信息
			getUserProfile(){
				console.log('=======================');
				uni.getUserProfile({
					desc: 'weiXin', 
					success: (res) => {
						this.userInfo.avatarUrl = res.userInfo.avatarUrl
						console.log('我的头像',this.userInfo.avatarUrl);
					},
				})
			},
			
			// 复制内容到剪切板
			copyInfo(){
				uni.setClipboardData({
					data: this.store.wechat,
					success: function () {
						console.log('success');
					}
				});
			},
			
			// 点击拨打电话号码
			makePhoneCall(){
				uni.makePhoneCall({
					phoneNumber: this.store.storePhone
				});
			},
			
			// 长按识别二维码
			previewImage(e){
				console.log('e',e);
				uni.previewImage({
					// urls:[],
					current:'',
					indicator:'default',
					loop:false,
					success: (res) => {
						console.log('长按操作成功',res);
					},
					fail: (err) => {
						console.log('长按操作失败',err);
					}
				})
			},
			
			
		},	
		watch: {
			//监听userInfo,如果有修改就执行监听器
			userInfo: function() {
		        //调接口刷新数据
				this.getUserInfo()
			}
		},
		
		created() {
			this.getItemFromSessionStorage()
			this.getStore()
			this.getUserInfo()
			this.getUserProfile()
		}
	}
</script>

<style lang="less">
	@import url('../../static/iconfont/iconfont.css');
	// 底色
	@bColor:#0D141F;
	// 主色
	@mColor:#623685;
	// 小号字体
	@font-size:25rpx;
	
	.contentBtnBox{
		height: 150rpx;
		line-height: 150rpx;
		border-radius: 50rpx;
		color: #fff;
		background-color: #232433;
		margin: 25rpx;
		display: flex;
		justify-content:space-between
	}
	
	// ======================================================
	page{
		background-color: @bColor;
	}
	.mine{
		// 头部
		.header{
			height: 400rpx;
			background-color: #b47eb5;
			padding-top: 100rpx;
			.headerTop{
				height: 100rpx;
				padding: 25rpx;
			}
			
			//门店按钮样式
			.storeGroup{
				width:160rpx ;
				height: 60rpx;
				line-height: 55rpx;
				font-size: 25rpx;
			}
			.personalData{
				.portrait{
					height: 140rpx;
					width: 140rpx;
					border-radius: 50%;
					border: 1rpx solid @bColor;
				}
				.contentBtnBox;
				padding: 28rpx;
				background-color: #b47eb5;
			}
		}
		
		// 内容
		.content{
			.myGrouping{
				.contentBtnBox
			}
			.myPlay{
				.contentBtnBox
			}
			.myPlayed{
				.contentBtnBox
			}
			.contactStore{
				.contentBtnBox
			}
		}
		
		// 脚部
		.footer{
			// border: 1rpx solid red;
			padding-top: 50rpx;
			text-align: center;
		}
		
		// 交互-uni-ui组件
		.interaction_uniUi{
			
			//门店群底部弹窗
			.storeGroup_popup{
				.storeGroup_popup_text{
					padding: 5rpx 10rpx;
					border-bottom: 1rpx solid @bColor;
					display: flex;
					justify-content: space-between;
				}
			}
			
			// 联系本店中部弹窗
			.contactStore_popup{
				.popup-content{
					padding: 60rpx;
					.phone{
						border-bottom: 1rpx solid #ccc;
						padding: 5rpx;
						margin-bottom: 25rpx;
						text-align: center;
					}
					.wechat{
						border-bottom: 1rpx solid #ccc;
						padding: 5rpx;
						margin-bottom: 25rpx;
						text-align: center;
					}
					.cancel_btn{
						text-align: center;
					}
				}
			}
			
		}
	}
</style>
